<template>
  <div role="lyMenu" class="ly-menu" :class="classObj">
    <ly-sub-menu v-for="(sub,index) in dataMenus" :key="index" :subObj="sub">
    </ly-sub-menu>
  </div>
</template>
<script>
export default {
  name:'lyMenu',
  props:{
    algin:{
      type:String,
      default:'vertical'
    },
    dataMenus:{
      type:Array,
      default(){
        return []
      }
    }
  },
  provide(){
    return {
      dataMenus:this.dataMenus
    }
  },
  computed:{
    classObj(){
      return {
        'ly-menu-horizontal':this.algin === 'horizontal'
      }
    }
  }
}
</script>
<style lang="scss">
  .ly-menu{
    border-right: 1px solid #e6e6e6;
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    background-color: #fff;
    text-align: left;
    &.ly-menu-vertical{
      max-width: 200px;
    }
    &.ly-menu-horizontal{
      >.ly-sub-menu{
        position: relative;
        .ly-menu-item{
          // position: absolute;
        }
      }
      .sub-item_title{
        padding-right: 50px;
      }
      &:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
      }
      max-width: none;
      width: 100%;
      .ly-sub-menu{
        float: left;
      }
    }
  }
</style>